<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" :show-close="false">
			<div slot="title"
				style="border-bottom: 1px solid #cbcbcb;display: flex;align-items: center;justify-content: space-between;padding-bottom: 15px;">
				<div style="font-size: 18px;color: #333;">方案征集</div>
				<i class="el-icon-close" style="cursor: pointer;" @click="close()"></i>
			</div>

			<div>
				<el-form ref="form" :model="form" :rules="rules">
					<el-row>
						<el-col :xs="8" :sm="4" :md="4" :lg="4" :xl="4" class="form-label">
							<span><span style="color: red;">*</span>征集名称</span>
						</el-col>
						<el-col :xs="16" :sm="18" :md="18" :lg="18" :xl="18">
							<el-form-item prop="headline">
								<el-input v-model="form.headline" placeholder="方案征集名称"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :xs="8" :sm="4" :md="4" :lg="4" :xl="4" class="form-label">
							<span><span style="color: red;">*</span>征集开始日期</span>
						</el-col>
						<el-col :xs="16" :sm="6" :md="6" :lg="6" :xl="6">
							<el-form-item prop="collectionTimeStart">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.collectionTimeStart"
									value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="8" :sm="{span:4,offset:2}" :md="{span:4,offset:2}" :lg="{span:4,offset:2}"
							:xl="{span:4,offset:2}" class="form-label">
							<span><span style="color: red;">*</span>征集结束日期</span>
						</el-col>
						<el-col :xs="16" :sm="6" :md="6" :lg="6" :xl="6">
							<el-form-item prop="collectionTimeEnd">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.collectionTimeEnd"
									value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :xs="8" :sm="4" :md="4" :lg="4" :xl="4" class="form-label">
							<span><span style="color: red;">*</span>联系人</span>
						</el-col>
						<el-col :xs="16" :sm="6" :md="6" :lg="6" :xl="6">
							<el-form-item prop="contactRen">
								<el-input v-model="form.contactRen" placeholder="联系人"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="8" :sm="{span:4,offset:2}" :md="{span:4,offset:2}" :lg="{span:4,offset:2}"
							:xl="{span:4,offset:2}" class="form-label">
							<span><span style="color: red;">*</span>联系电话</span>
						</el-col>
						<el-col :xs="16" :sm="6" :md="6" :lg="6" :xl="6">
							<el-form-item prop="contactPhone">
								<el-input v-model="form.contactPhone" placeholder="联系电话" maxlength="11"
									@input="inputChange"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="20" :offset="2">
							<el-form-item label="征集描述" prop="settleMatter">
								<el-input v-model="form.settleMatter" type="textarea" placeholder="方案征集描述"
									maxlength="500" show-word-limit rows="5"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row style="position: relative;top: -10px;">
						<el-col :span="20" :offset="2">
							<el-form-item label="征集要求">
								<el-input v-model="form.expectedEffect" type="textarea" placeholder="方案征集要求"
									maxlength="500" show-word-limit rows="5"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

				<el-row>
					<el-col :span="20" :offset="2">
						<div style="display: flex;align-items: flex-end;">
							<div style="display: flex;align-items: center;">
								<span style="font-size: 14px;color: #333333;margin-right: 5px;">附件</span>
								<el-upload action="" :show-file-list="false" :http-request="httpRequest"
									:before-upload="beforeAvatarUpload">
									<el-button type="primary" plain size="small" v-loading="uploading">点击上传</el-button>
								</el-upload>
							</div>
							<span style="font-size: 12px;color: #333333;margin-left: 5px;">上传文件大小不超过10M</span>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20" :offset="2">
						<div v-for="(item,index) in fileList"
							style="margin-top: 10px;display: flex;align-items: center;">
							<span>{{ item.file.name }}</span>
							<i class="el-icon-close" style="cursor: pointer;margin-left: 10px;"
								@click="handleRemove(index)"></i>
						</div>
					</el-col>
				</el-row>
			</div>

			<div slot="footer" v-loading="loading" style="display: flex;justify-content: center;cursor: pointer;">
				<img style="width: 138px;height: 44px;" src="@/assets/images/industryNews25.png" 
					@click="submit()">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getUploadImg
	} from "@/request/api/link";
	import {
		planCollectAdd
	} from "@/request/api/planPromotion";
	import rulesUtil from "@/utils/rules" //引入
	export default {
		data() {
			return {
				dialogVisible: false,
				uploading: false,
				loading: false,
				form: {
					"headline": "", //征集标题
					"applicableTargets": "", //适用对象：方案适用的行业、机构或领域。
					"target": "", //目标用户：方案适用的用户群体。
					"settleMatter": "", //需求描述
					"expectedEffect": "", //预期效果：预期能够达到的效果。征集要求
					"collectionTimeStart": "", //投稿时间 起
					"collectionTimeEnd": "", //投稿时间 止
					"cover": "", //封面图
					"contactPhone": "", //联系电话
					"contactRen": "", //联系人
					"accessoryDtos": [ //附件
					]
				},
				fileList: [],

				rules: {
					headline: [{
						required: true,
						message: '请输入征集名称',
						trigger: 'blur'
					}],
					collectionTimeStart: [{
						required: true,
						message: '请选择征集开始日期',
						trigger: 'change'
					}],
					collectionTimeEnd: [{
						required: true,
						message: '请选择征集结束日期',
						trigger: 'change'
					}],
					contactRen: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}],
					contactPhone: [{
						required: true,
						validator: rulesUtil.FormValidate.Form().checkTel,
						trigger: 'blur'
					}],
					settleMatter: [{
						required: true,
						message: '请输入征集描述',
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			open() {
				this.dialogVisible = true
				this.form = {
					"headline": "", //征集标题
					"applicableTargets": "", //适用对象：方案适用的行业、机构或领域。
					"target": "", //目标用户：方案适用的用户群体。
					"settleMatter": "", //需求描述
					"expectedEffect": "", //预期效果：预期能够达到的效果。征集要求
					"collectionTimeStart": "", //投稿时间 起
					"collectionTimeEnd": "", //投稿时间 止
					"cover": "", //封面图
					"contactPhone": "", //联系电话
					"contactRen": "", //联系人
					"accessoryDtos": [ //附件
					]
				}
				this.fileList = []
			},
			handleRemove(index) {
				// console.log('handleRemove',index)
				this.fileList.splice(index, 1)
			},
			// 关闭
			close() {
				this.$refs.form.resetFields();
				this.dialogVisible = false
			},
			// 提交
			submit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						// alert('submit!');
						this.loading = true
						planCollectAdd(this.form).then((res) => {
							// console.log('res',res)
							this.loading = false
							if (res.data.code == 200) {
								this.$message.success(res.data.message);
								this.dialogVisible = false
								this.$emit('reloadData')
							} else {
								this.$message({
									message: res.data.message,
									type: "warning",
								});
							}
						}).catch((err) => {
							this.loading = false
							console.log('err', err)
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 只输入数字
			inputChange() {
				this.form.contactPhone = this.form.contactPhone.replace(/[^\d]/g, '')
			},
			// 选择完成回调
			httpRequest(option) {
				// console.log('httpRequest',option)
				let imgData = new FormData();
				imgData.append("file", option.file);
				//调接口，上传图片
				this.uploading = true
				getUploadImg(imgData).then((response) => {
					this.uploading = false
					if (response.data.code == 200) {
						this.fileList.push(option)
						this.form.accessoryDtos.push({
							accessoryName: option.file.name,
							accessoryUrl: response.data.message
						})
						this.$message.success('上传成功');
					} else {
						this.$message.error(response.data.message);
					}
				}).catch(() => {
					this.uploading = false
					this.$message.error('网络异常');
				});
			},
			// 限制上传的类型
			beforeAvatarUpload(file) {
				const isLt10M = file.size / 1024 / 1024 < 10;
				if (!isLt10M) {
					this.$message.error("上传图片大小不能超过 10M!");
					return false;
				}
				// var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
				// const extension = testmsg === "jpg" || testmsg === "JPG";
				// const extension2 = testmsg === "png" || testmsg === "PNG";
				// if (!extension && !extension2) {
				// 	this.$message({
				// 		message: "上传图片只能是 jpg, png格式!",
				// 		type: "error",
				// 	});
				// 	return false;
				// }
			},
		}
	}
</script>

<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		/deep/.el-dialog {
			width: 95%;
		}
	}

	.form-label {
		margin-top: 10px;
		text-align: right;
		padding-right: 15px;
	}
</style>